﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactsControl.ascx.cs"
    Inherits="UserControl_ContactsControl" %>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/font.css" rel="stylesheet" type="text/css" />
<link href="../css/style_ts.css" rel="stylesheet" type="text/css" />
<%--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
    language="javascript" charset="gb2312"></script>
--%>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>

<style type="text/css">
    .tab
    {
        background-color: #FAFAFA;
        margin: 2px 5px;
        padding: 2px 4px;
    }
    .tab p span
    {
        background-color: #EFEFEF;
        border: 1px solid #CCCCCC;
        cursor: pointer;
        margin-right: 6px;
        padding: 2px 5px;
    }
    .tab p span.current
    {
        background-color: #FAFAFA;
        border-bottom-color: #fafafa;
    }
    .tab p
    {
        border-bottom: 1px solid #CCCCCC;
        font-weight: bold;
        padding: 0 10px 2px;
    }
    .tab li
    {
        border-bottom: 1px dotted #CCCCCC;
        padding-bottom: 2px;
        margin: 1px 0;
    }
    .tab .mhot, .tab.allhot
    {
        display: none;
    }
    .tab ul
    {
        margin-left: 1px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        //Tab
        $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式
        $(".tab ul:not(:first)").hide(); //隐藏其它的UL
        $(".tab span").click(function() {
            $(".tab span").removeClass("current"); //去掉所有SPAN的样式
            $(this).addClass("current");
            $(".tab ul").hide();
            $("." + $(this).attr("id")).fadeIn('normal');
        });
        //TreeView点击
        var o = $('a[href]');
        o.each(function() {
            var oo = $(this);
            oo.click(function() {
                $('#s1').empty();
                $.ajax({
                    type: "GET",
                    url: oo.attr('href'),
                    success: function(msg) {
                        $('#s1').append(msg);
                    }
                });
                return false;
            });
        });

        //点击查询按钮
        $('#btnSearch').click(function() {
            $('#s1').empty();
            $.ajax({
                type: "GET",
                url: 'GetContactsHandler.ashx?SearchType=' + $('#ddlSearchType option:selected').val() + '&Condition=' + $.trim($('#txtCondition').val()),
                success: function(msg) {
                    if ($.trim(msg) != '') {
                        $('#s1').append(msg);
                    }
                }
            });
        });


        //左边双击
        $("#s1").dblclick(function() {
            var alloptions = $("#s1 option");
            var so = $("#s1 option:selected");

            //so.get(so.length - 1).index == alloptions.length - 1 ? so.prev().attr("selected", true) : so.next().attr("selected", true);
            if ($("#s2").val() == null) {
                $("#s2").append(so);
            }
            if ($("#s2").text() != null) {
                if ($("#s2").text().indexOf(so.val()) == -1) {
                    $("#s2").append(so);
                }
                if ($("#s2").text().indexOf(so.val()) > -1) {
                }
            }
            var strings = '';
            $('#s2 option').each(function() {
                strings = strings + $(this).val() + ',';
            });

            $('#hih_right').attr('value', strings);
        });
        //右边双击
        $("#s2").dblclick(function() {
            var alloptions = $("#s2 option");
            var so = $("#s2 option:selected");
            //so.get(so.length - 1).index == alloptions.length - 1 ? so.prev().attr("selected", true) : so.next().attr("selected", true);
            if ($("#s1").text() == null) {
                $("#s1").append(so);
            }
            if ($("#s1").text() != null) {
                if ($("#s1").text().indexOf(so.val()) == -1) {
                    $("#s1").append(so);
                }
                else {
                    so.remove();
                }
            }
            var strings = '';
            $('#s2 option').each(function() {
                strings = strings + $(this).val() + ',';
            });

            $('#hih_right').attr('value', strings);
        });
        //选中右移
        $("#add").click(function() {
            var alloptions = $("#s1 option");
            if ($("#s1 option").val() != null) {
                var so = $("#s1 option:selected");
                if (so.length > 0) {
                    //so.get(so.length - 1).index == alloptions.length - 1 ? so.prev().attr("selected", true) : so.next().attr("selected", true);
                    if ($('#s2').text() == null) {
                        $("#s2").append(so);
                    }
                    if ($('#s2').text() != null) {
                        if ($('#s2').text().indexOf(so.val()) == -1) {
                            $("#s2").append(so);
                        }
                        else {
                            so.remove();
                        }
                    }
                }
            }
            var strings = '';
            $('#s2 option').each(function() {
                strings = strings + $(this).val() + ',';
            });

            $('#hih_right').attr('value', strings);
        });
        //选中左移
        $("#remove").click(function() {
            var alloptions = $("#s2 option");
            if (alloptions.length > 0) {
                var so = $("#s2 option:selected");
                if (so.length > 0) {
                    //so.get(so.length - 1).index == alloptions.length - 1 ? so.prev().attr("selected", true) : so.next().attr("selected", true);
                    if ($('#s1 option').length == 0) {
                        $("#s1").append(so);
                    }
                    else {
                        if ($('#s1').text().indexOf(so.val()) == -1) {
                            $("#s1").append(so);
                        }
                        else {
                            so.remove();
                        }
                    }
                }
            }
            var strings = '';
            $('#s2 option').each(function() {
                strings = strings + $(this).val() + ',';
            });

            $('#hih_right').attr('value', strings);
        });
        //全部右移
        $("#addall").click(function() {
            if ($("#s1").text() != null) {
                //$("#s1").eq(0).selectedIndex = 0;
                if ($("#s2 option").length == 0) {
                    //alert($("#s2").text());
                    $("#s2").append($("#s1 option"));
                }
                if ($("#s2").text() != null) {
                    var flag = false;
                    $("#s1 option").each(function() {
                        if ($("#s2").text().indexOf($(this).val()) == -1) {
                            $("#s2").append($(this));
                        }
                        else {
                            $(this).remove();
                        }
                    });
                }
                $("#s1").val(null);
            }
            var strings = '';
            $('#s2 option').each(function() {
                strings = strings + $(this).val() + ',';
            });

            $('#hih_right').attr('value', strings);
            $("#s1").empty();
            $("#s1").html('');
        });
        //全部左移
        $("#removeall").click(function() {
            if ($("#s2").text() != null) {
                if ($("#s1").text() == null) {
                    $("#s1").append($("#s2 option"));
                }
                if ($("#s1").text() != null) {
                    var flag = false;
                    $("#s2 option").each(function() {
                        var s2o = $(this);
                        if ($("#s1").text().indexOf(s2o.val()) == -1) {
                            $("#s1").append(s2o);
                        }
                        else {
                            s2o.remove();
                        }
                    });
                }
                $("#s2").empty();
            }
            var strings = '';
            $('#s2 option').each(function() {
                strings = strings + $(this).val() + ',';
            });

            $('#hih_right').attr('value', strings);
        });
    });

</script>

<input type="hidden" runat="server" id="hih_right" value=""/>

<table border="1" cellpadding="0" cellspacing="0" bordercolor="#0e62a7" style="width: 100%;">
    <tr>
        <td valign="top">
            <%--<table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td valign="top">--%>
            <div class="tab" style="text-align: left">
                <p>
                    <span id="tab1">组织结构</span><span id="tab2">自定义组</span>
                </p>
                <ul class="tab1">
                    <asp:TreeView ID="tvContactsGroup" runat="server" ImageSet="Arrows" ShowLines="True">
                        <ParentNodeStyle Font-Bold="False" />
                        <HoverNodeStyle Font-Underline="False" ForeColor="#5555DD" />
                        <SelectedNodeStyle Font-Underline="False" HorizontalPadding="0px" VerticalPadding="0px"
                            ForeColor="#5555DD" Font-Bold="true" />
                        <RootNodeStyle ForeColor="Blue" />
                        <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"
                            NodeSpacing="0px" VerticalPadding="0px" />
                    </asp:TreeView>
                </ul>
                <ul class="tab2">
                    自定义组
                </ul>
            </div>
            <%--</td>
                                    </tr>
                                </table>--%>
        </td>
        <td valign="top">
            <!--查询框-->
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <span>查询选项：</span>
                        <asp:DropDownList ID="ddlSearchType" runat="server">
                            <asp:ListItem Selected="True" Value="CT_Name">姓名</asp:ListItem>
                            <asp:ListItem Value="CT_Mobile">手机号码</asp:ListItem>
                        </asp:DropDownList>
                        <asp:TextBox ID="txtCondition" runat="server" Style="border: 1px solid #000000; width: 120px"
                            MaxLength="11"></asp:TextBox>
                        <input type="button" id="btnSearch" runat="server" title="查询" style="width: 61px;
                            height: 21px; border: 0px; background: url(../../Images/3G/button_search.gif) no-repeat;" />
                        <asp:Button ID="btnConfirm" runat="server" ToolTip="确认选择" OnClick="btnConfirm_Click" />
                    </td>
                </tr>
            </table>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <div id="divData">
                            <table>
                                <tr>
                                    <td style="vertical-align: top">
                                        <span>联系人</span>
                                        <br />
                                        <asp:ListBox ID="s1" runat="server" Height="250px" Width="175px" SelectionMode="Multiple">
                                        </asp:ListBox>
                                    </td>
                                    <td style="vertical-align: middle">
                                        <input type="button" id="addall" runat="server" title="全部右移" />
                                        <br />
                                        <input type="Button" id="add" runat="server" title="右移" />
                                        <br />
                                        <input type="Button" id="remove" runat="server" title="左移" />
                                        <br />
                                        <input type="Button" id="removeall" runat="server" title="全部左移" />
                                    </td>
                                    <td>
                                        <span>已选择联系人</span>
                                        <br />
                                        <asp:ListBox ID="s2" runat="server" Height="250px" Width="175px" SelectionMode="Multiple">
                                        </asp:ListBox>
                                        <select id="s3" style="display: none" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
